<template>
  <div>
    <Header></Header>
    <div class="chapter-detail white mt-5">
      <a class="a-detail" v-for="(item, index) in Chapter" :key="index" @click="jumpTo(item.url)">
        <dt>{{ item.name }}</dt>
        <dd>{{ item.update_time }}</dd>
      </a>
    </div>
    <div v-if="Chapter.length == 0" class="text-center" v-cloak>暂未收录</div>
  </div>
</template>

<script>
import Header from './components/Header.vue'
export default {
  components: {
    Header
  },
  data() {
    return {
      data: this.$route.query,
      Chapter: [],
      Discussion: []
    }
  },
  mounted() {
    this.initChapter()
  },
  methods: {
    jumpTo(target) {
      this.$router.push({path: '/ebook', query: {url: target}})
    },
    initChapter() {
      this.post('list', {
        pagesize: 10,
        pagenum: 1,
        id: this.data.id
      }, {emulateJSON: true}).then((response) => {
        this.Chapter = response.data.data.list
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  [v-cloak] {
    display: none;
  }
  .chapter-detail {
      position: relative;
      border-top: 1px solid #ebebeb;
      border-bottom: 1px solid #ebebeb;
      box-sizing: border-box;
      overflow: hidden;
      padding: 0 1.4rem;
  }
  .a-detail {
      display: flex;
      justify-content: space-between;
      line-height: 1.5rem;
      height: 1.5rem;
  }
</style>
